// var girl = 'img/head/girl2.jpg';
// var boy = 'img/head/boy.jpg';


var ul = document.getElementById('list');
var lis = [];
for (var i = 0; i < list.length; i++) {
    // var img = list[i].gender == 1 ? `<img src="${boy}">` : `<img src="${girl}">`;
    // 自定义头像
    var img = `<img src="img/pics/${list[i].id}g.webp">`;
    var li = `<li>
                 <div class="head-img">${img}</div>    
                 <p>${list[i].name}</p>
                 <div class="cover"></div>
             </li>`;
    lis.push(li);
}
ul.innerHTML = lis.join("");

var btnBegin = document.getElementById('btn-begin');
var btnEnd = document.getElementById('btn-end');

//答题人
var targetName = document.getElementById('targetName');
var targetHead = document.getElementById('targetHead');

var timerId = null;
var rand = null;

// 开始
btnBegin.onclick = function() {
    var lis = ul.getElementsByTagName('li');
    if (timerId) {
        clearInterval(timerId);
    }
    timerId = setInterval(function() {
        rand = getRandom(0, list.length - 1);
        targetName.innerHTML = list[rand].name;
        // 顶部答题人头像切换 img/pics/${list[i].id}g.web

        targetHead.src = `img/pics/${list[rand].id}g.webp`;
        // targetHead.src = list[rand].gender == 1 ? boy : girl;

        for (var i = 0; i < lis.length; i++) {
            // lis[i].children[2].className = 'cover';
            lis[i].children[2].classList.remove('active');
            if (i == rand) {
                // lis[i].children[2].className = 'cover active';
                lis[i].children[2].classList.add('active');
            }
        }
    }, 100);
    // 调用视频开始函数
    start();
}

//结束
btnEnd.onclick = function() {

    if (timerId) {
        targetName.innerHTML = list[rand].name;
        targetHead.src = `img/pics/${list[rand].id}g.webp`;
        // targetHead.src = list[rand].gender == 1 ? boy : girl;
        clearInterval(timerId);
    }
    stop();
}

// 生成指定范围的随机整数
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

// 空值音频播放暂停
var music = document.getElementById('music');

function start() {
    // 设置播放开始时间
    if (music.currentTime <= 5) {
        music.currentTime = 5;
    } else if (music.currentTime >= 220) {
        music.currentTime = 5;
    }
    music.play();
    // console.log('开始播放！');
    music.muted = false;
}

function stop() {
    // 设置播放开始时间
    if (music.currentTime <= 5) {
        music.currentTime = 5;
    } else if (music.currentTime >= 220) {
        music.currentTime = 5;
        music.play();
    }
    // music.pause();
    // console.log('暂停播放！');
    music.muted = true;
    // console.log('静音播放！');
}

// 切换面板
var btnCall = document.getElementById('btn-call');
var btnTitle = document.getElementById('btn-title');
var callBox = document.getElementById('callBox');
var titleBox = document.getElementById('titleBox');

// 点名面板
btnCall.onclick = function() {
    callBox.style.display = 'block';
    titleBox.style.display = 'none';
    music.style.opacity=0.8;
}

// 题目面板
btnTitle.onclick = function() {
    callBox.style.display = 'none';
    titleBox.style.display = 'block';
    music.style.opacity=0.1;
    (current == 1) && initFirstTitle();
}

// 题目面板内容渲染
// 题目数量
var titleNums = document.getElementById('titleNums');
// 当前题目
var currentTitle = document.getElementById('currentTitle');
// 当前选项li
var currentChoiceLis = document.querySelectorAll('#currentChoice li');
// 当前选项内容p
var currentChoicePs = document.querySelectorAll('#currentChoice li p');
// 当前分析
var analysis = document.getElementById('analysis');
// 答案按钮
var btnAns = document.getElementById('btn-ans');
// 下一题按钮
var btnAnalysis = document.getElementById('btn-analysis');
// 下一题按钮
var btnNext = document.getElementById('btn-next');
// 初始化当前题目序号
var current = 1;

// 显示答案
btnAns.onclick = function() {
    let temp = getCurrentTitle(current);
    temp.answer.forEach((item, index) => {
        if (item) {
            currentChoiceLis[index].className = 'rightStatus';
        }
    });
}

// 显示解析
btnAnalysis.onclick = function() {
    analysis.parentNode.style.display = "block";
}

// 下一题
btnNext.onclick = function() {
    current++;
    if (current > titleList.length) {
        cleanTitle();
        return;
    }
    changeTitleNum();
    let temp = getCurrentTitle(current);
    renderContent(temp);
    initTitle();
}

// 修改题目数量信息 
function changeTitleNum() {
    titleNums.innerHTML = `题目${current}/${titleList.length}`;
}

// 寻找当前项题目
function getCurrentTitle(cur) {
    let curObj = titleList.find(item => item.id == cur);
    return curObj;
}

// 渲染结构内容
function renderContent(curObj) {
    // 题目
    currentTitle.innerText = curObj.title;
    // 选项内容
    curObj.choice.forEach((item, index) => {
        currentChoicePs[index].innerHTML = item;
    });
    // 解析内容
    analysis.innerHTML = curObj.analysis;
}

// 题目初始化
function initTitle() {
    // 隐藏解析
    analysis.parentNode.style.display = "none";
    // 清空选中样式
    currentChoiceLis.forEach(item => {
        item.className = '';
    });
}

// 清空题目内容
function cleanTitle() {
    let arrStr = [
        '<div class="currentTitle title_bg"><h1>End</h1></div>',
        '<div class="currentContent title_bg"><h1 class="loveYou">爱你！</h1><div>',
    ];
    titleBox.innerHTML = arrStr.join('');
}

// 初始化第一题
function initFirstTitle() {
    changeTitleNum();
    let temp = getCurrentTitle(1);
    renderContent(temp);
    // current = 2;
    // initTitle();
}